<template>
  <div class="index-wrapper">
    <PageHeader title="分类"></PageHeader>
    <p class="type-desc">----笔趣阁----</p>
    <div class="type-wrapper">
      <div
        class="type-item"
        v-for="item in typeList"
        @click="handleClick(item)"
        :key="item.name"
      >
        <div>{{ item.name }}</div>
        <div class="type-img">
          <image
            :src="item.imgurl || 'https://www.biqulu.cc/bookimg/113/113589.jpg'"
          ></image>
        </div>
      </div>
    </div>
  </div>
</template>

<route>
	{
		layout: 'noTabr'
	}
</route>
<script setup lang="ts">
import { ref } from "vue";
let typeList = ref([
  {
    name: "玄幻奇幻",
  },
  {
    name: "武侠仙侠",
  },
  {
    name: "都市言情",
  },
  {
    name: "历史军事",
  },
  {
    name: "网游竞技",
  },
  {
    name: "科幻灵异",
  },
  {
    name: "女生频道",
  },
  {
    name: "完本",
  },
  {
    name: "排行榜",
  },
]);
const handleClick = (item) => {
  console.log(item);
  if (["排行榜"].includes(item.name)) {
    uni.navigateTo({
      url: `/pages/Ranking/Ranking`,
    });
  } else {
    uni.navigateTo({
      url: `/pages/bookList/bookList?type=${item.name}`,
    });
  }
};
</script>

<style lang="scss" scoped>
.index-wrapper {
  height: 100%;
  width: 100%;
}
.type-desc {
  text-align: center;
  font-size: 32rpx;
  color: #595959;
}
.type-wrapper {
  display: grid;
  padding: 20rpx;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10rpx;
  .type-item {
    display: flex;
    height: 120rpx;
    background: #f0cead;
    justify-content: space-around;
    align-items: center;
    border-radius: 20rpx;
    .type-img,
    image {
      width: 70rpx;
      height: 80rpx;
      border-radius: 20rpx;
    }
  }
}
</style>
